import React, { Component } from 'react';
// import { observer, inject } from 'mobx-react';
import { getBookname } from './../../utils/api';
import creatHistory from 'history/createHashHistory' 
export default class extends Component{
    constructor(props) {
        super(props);
        this.state = {
            searchList: [],
            title:''
           
        }
    }
    componentDidMount() {
        let title = ''
    /* 把参数存在本地 防止页面刷新 数据丢失参数，初次判断是否第一次进入 */
        /* 必须先判断state当中又没有值，不然直接判断state.name如果不存在name会报错 */
        if (this.props.location.state && this.props.location.state.name) {
            title = this.props.location.state.name
            sessionStorage.setItem('title', this.props.location.state.name)
        } else {
            title =  sessionStorage.getItem('title')
        }
    /* 这个title就是搜索页面跳转传来的对应接口的title字段 */
        this.setState({
            title
        })
        // console.log(title)
        getBookname(title).then(res => {
            console.log(res.data.data)
            this.setState({
               searchList:res.data.data
           })
        })
    }
    render() {
        const history = creatHistory()
        return (
            <div>
                 {/* 头部 */ }
            < header className = 'bg-red h-4 text-white w-100 flex justify-center align-center px-2' >
                    <i className='iconfont icon-back ' onClick={() => {
                        history.goBack()
                    }}>返回</i>< i className='font-smaller flex-1 text-center' >
                        跟《{this.state.title}》有关的书籍</i ><i className='iconfont icon-shujia font-small'></i> <i className='iconfont icon-index ml-1 '></i>
                </header >
                <div style={{ overflow: "auto",height:'5.96rem'}}>
                <ul style={{overflow:"auto"}}>
                    {
                        this.state.searchList.map((item,index )=> {
                            return (
                                <li key={index} className='flex px-2 align-center py-1' >
                                    <div style={{ width: '0.59rem'}}><img src={item.cover.indexOf('img22')!==-1?item.cover:'https://img22.aixdzs.com/'+item.cover} style={{ width: '0.59rem' }}
                                                    
                                                    alt='无图' />
                                    </div>
                                    <div style={{height: '0.74remm'}} className='px-1'>
                                        <h2>{item.title}</h2>
                                        <span className='text-muted font-xiao'>{item.author} <i className='px-1'>|</i>{item.cat}</span>
                                        <p className='overflow-hidden text-muted font-xiao' style={{width:'2.59rem',height:'0.2rem'}}>{item.longIntro}</p>
                                        <div className='font-xiao text-dark'>字数:
                                        <i className='text-red'>{item.wordCount}</i><i className='px-1'>|</i>读者留存:<i className='text-red'>{item.retentionRatio}%</i></div>
                                     </div>
                                </li>
                            )
                        })
                    }
                    </ul>
                    </div>
            </div>
        )
    }
}